<html>
    <head>
        <meta charset="utf-8">
        <script src="../dist/claygl.js"></script>
    </head>
    <body>
        <canvas width="600" height="640" id="Renderer1" style="float:left"></canvas>
        <canvas width="600" height="640" id="Renderer2" style="float:left"></canvas>
        <script type="text/javascript">
            var Shader = clay.Shader;
            var Material = clay.Material;
            var Mesh = clay.Mesh;
            var Cube = clay.geometry.Cube;
            var meshUtil = clay.util.mesh;
            var shaderLibrary = clay.shader.library;

            var renderer1 = new clay.Renderer({
                canvas: document.getElementById( "Renderer1")
            });
            var renderer2 = new clay.Renderer({
                canvas: document.getElementById( "Renderer2")
            });
            var scene = new clay.Scene;
            var camera = new clay.camera.Perspective({
                aspect: renderer1.getViewportAspect(),
                far: 500
            });

            var cube = new Cube();
            var shader = shaderLibrary.get('clay.lambert');

            var material = new Material({
                shader: shader
            });
            var texture = new clay.Texture2D;
            texture.image = new Image;
            texture.image.onload = function(){
                texture.dirty();
            }
            texture.image.src = "assets/textures/crate.gif";

            material.set('diffuseMap', texture);
            material.set('color', [1, 1, 1]);

            var mesh = new Mesh({
                geometry: cube,
                material: material
            });

            camera.position.set(0, 4, 4);
            camera.lookAt( scene.position );

            scene.add( mesh );

            var light = new clay.light.Directional({
                color: [1.5, 1.5, 1.5]
            })
            light.position.set(50, 50, 50);
            light.lookAt( scene.position );
            scene.add( light );


            setInterval( function(){
                renderer2.render( scene, camera );
                renderer1.render( scene, camera );

                mesh.rotation.rotateY(Math.PI/500);
            }, 20);

        </script>
    </body>
</html>